<!-- The map -->
<div id="map"></div>	

<!-- Note menu -->
<div id="notemenu">
	<script type="text/javascript">
			$().ready(function(){
						var menuContent; 
						$.get($('#menuContainer').attr('href'), function(data){menuContent = data;});
						$('#menuContainer').click(function(){			
							try
							{
								var menu2 = new Menu(this, {
									content: menuContent, 
									width: 216,
									maxHeight: 400,
									positionOpts: {offsetY: -1},
									callerOnState: 'btnMenuOn', 
									itemHover: 'hover', 
									selectCategories: false,
									topLinkText: 'All Categories'
								}).create();
							}
							catch(err){}					
							return false;
						});			
					});
	</script>
	<a id="menuContainer" class="menuBtn menuAction menuNavigator" href="<?php echo base_url().index_page() ?>/menu"><span><b>Select a note...</b></span></a>
</div>
<div id="menuBackOffice">
	<a class="menuBtn" href="<?php echo base_url().index_page().'/formulaire' ?>"><span><b>Back Office</span></b></a>
</div>

<!-- Tag bar -->
<div id="tagbar">
	<div class="tagbarcontainer">
	<?php
	foreach($tags as $tag)
	{
		echo '<a href="#" id="'.$tag['name'].'" class="transparent">';
		echo '<img src="'.base_url().$tag['src'].'" alt="'.$tag['name'].'" /><span>'.$tag['name'].'</span></a>';
	}
	
	// Javascript handle
	echo "\r\n".'<script type="text/javascript">';
	echo 'var tags = new Array();';
	echo 'var baseIcon = null;';
	foreach($tags as $tag)
	{
		echo '$().ready(function(){$("#'.$tag['name'].'").click(tagClick)});';
		echo 'tags.push("'.$tag['name'].'");';
	}
		
	// put the markers selected on the map
	echo 'function showMarkers(tagSelected){';
	foreach($markers as $marker)
	{
		echo 'addMarker(tagSelected,
										"'.$marker->name.'",
										"'.$marker->x.'",
										"'.$marker->y.'",
										"'.$this->config->item('dir_tag').$marker->filename.'",
										"'.index_page().'/note/get/'.$marker->id_note.'",true);';
	}
	echo 'showMarkersPhotos();';
	echo '};';
	echo '</script>';
	?>
	</div>
</div>
	
	<!-- Toolbar for the map 
	<div id="toolbar">
		<div id="hand_b"></div>
		<div id="placemark_b"></div>
		<div id="line_b"></div>
	</div>
	-->

	<!-- Floating windows -->
	<div id="blogEntry" class="window">
		<img src="img/close_icon.gif" alt="close" class="windowClose" />
		<img src="img/resize.gif" alt="resize" class="windowResize"/>
		<div class="windowTitle"></div>
		<div class="windowDate"></div>
		<div class="windowContent"></div>
		<div class="windowFooter"></div>
	</div>	
	
	<div id="comments" class="window">
		<img src="img/close_icon.gif" alt="close" class="windowClose" />
		<img src="img/resize.gif" alt="resize" class="windowResize"/>
		<div class="windowTitle">
			<h1>Comments</h1>
		</div>
		<div class="windowContent"></div>
		<div class="windowFooter"></div>
	</div>
	
	<div id="addComment" class="window">
		<img src="img/close_icon.gif" alt="close" class="windowClose" />
		<img src="img/resize.gif" alt="resize" class="windowResize"/>
		<div class="windowTitle">
			<h1>New comment</h1>
		</div>
		<div class="windowContent"></div>
	</div>
	
	<div id="photos" class="window">
		<img src="img/close_icon.gif" alt="close" class="windowClose" />
		<div class="windowTitle">
			<h1>Photos</h1>
		</div>
		<div class="photoslider" id="photoSlider"></div>
	</div>
	
	<!-- for the form -->
	<div id="addForm" class="window">
		<img src="img/close_icon.gif" alt="close" class="windowClose" />
		<img src="img/resize.gif" alt="resize" class="windowResize"/>
		<div class="windowTitle">
			<h1>Ajouter un billet</h1>
		</div>
		<div class="windowContent"></div>
	</div>

<!-- Photo bar -->
<div id="photobar">
	<div class="photobarContainer">
		<?php 
		foreach($photos as $photo) 
		{
			echo '<a href="#" ><span></span><img src="'.$photo['src'].'" alt="" id="photo_'.$photo['id'].'"/></a>';
		}
		?>
	</div>
</div>
<script type="text/javascript">
<?php
foreach($photos as $photo)
{
	echo '$().ready(function(){
			$("#photo_'.$photo['id'].'").click(function(){';
	echo "
		$.ajax({
			type: 'GET',
			url:'".index_page()."/note/get/$photo[id_note]/idphoto/$photo[id]',
			dataType: 'xml',
			success: function(xml){
				$('#blogEntry').jqmShow();
				$('#photos').jqmShow();
				loadWindows(xml);
			}
		});
	";
	echo '})});';
}

echo '$().ready(function(){';
foreach($photosMarkers as $photo)
{
	echo 'addMarkerPhoto("'.$photo['x'].'","'.$photo['y'].'","'.index_page().'/note/get/'.$photo['id_note'].'/idphoto/'.$photo['id'].'");'."\r\n";
}
echo 'showMarkersPhotos()';
echo '});';
?>
</script>